<template>
  <el-container>
    <el-header>
      <!-- 头部 -->
      <section>
        <i class="el-icon-s-fold">
          <span>收入管理</span>
        </i>
      </section>
      <section>
        <i class="el-icon-search"></i>
        <i class="el-icon-bell">
          <img src="../assets/u28.jpg" />
          <span>{{this.$store.state.loginName}}</span>
        </i>
      </section>
      <!--头部结束  -->
    </el-header>
    <el-main>
      <el-select v-model="value" placeholder="宝安校区" class="xiaoqu">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="echarts">
        <span class="zhanbi">收入类型占比</span>
        <!-- 饼图 -->
        <div id="shanOne" :style="{width: '260px', height: '260px'}"></div>
        <ul class="bingul">
          <li>
            <img src="../assets/bluepoint.png" /> 课程收入
            <span>|</span> 21455元
          </li>
          <li>
            <img src="../assets/purplepoint.png" /> 组合包收入
            <span>|</span> 18600元
          </li>
          <li>
            <img src="../assets/point3.png" /> 商品收入
            <span>|</span> 24300元
          </li>
          <li>
            <img src="../assets/point4.png" /> 其他
            <span>|</span> 16900元
          </li>
        </ul>
        <section>
          <h4>收入趋势统计图</h4>
          <span>统计时间 2020-08-24</span>
        </section>
        <div id="jianbianlan" :style="{width: '500px', height: '280px'}"></div>
      </div>
      <div class="coursemoney">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程收入" name="first">
            <div class="needflex">
              <section>
                课程类型：
                <el-select v-model="value1" placeholder="街舞" class="coursetype">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </section>
              <section>
                课程名称：
                <el-select v-model="value1" placeholder="全部课程" class="courseming">
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </section>
              <section>
                搜索：
                <el-input v-model="input" placeholder="请输入内容" class="search"></el-input>
              </section>
            </div>
            <p class="zongnum">
              <span>课程数: 20个</span>
              <span>实收金额: 46800元</span>
            </p>
            <el-table :data="tableData1" height="500" border style="width: 100%">
              <el-table-column prop="number" label="序列" width="80"></el-table-column>
              <el-table-column prop="coursename" label="课程名称"></el-table-column>
              <el-table-column prop="teacher" label="老师"></el-table-column>
              <el-table-column prop="courseorder" label="课程订单本月实收"></el-table-column>
              <el-table-column prop="groupbag" label="组合包订单本月实收"></el-table-column>
              <el-table-column prop="renyi" label="任意上课实收"></el-table-column>
              <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="table = true" style="color:red">详情</el-button>
                  <el-drawer title="课程详情" :visible.sync="table" direction="rtl" size="50%">
                    <el-table :data="gridData">
                      <el-table-column property="date" label="日期" width="150"></el-table-column>
                      <el-table-column property="where" label="购买来源" width="150"></el-table-column>
                      <el-table-column property="address" label="校区" width="150"></el-table-column>
                      <el-table-column property="remark" label="备注"></el-table-column>
                    </el-table>
                  </el-drawer>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="商品收入" name="second">
            <div class="needflex">
              <section>
                选择分类：
                <el-select v-model="value2" placeholder="教辅商品" class="coursetype">
                  <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </section>
              <section>
                选择商品：
                <el-select v-model="value2" placeholder="芭蕾舞鞋" class="courseming">
                  <el-option
                    v-for="item in options6"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </section>
              <section>
                搜索：
                <el-input v-model="input" placeholder="请输入商品名称" class="search"></el-input>
              </section>
            </div>
            <p class="zongnum">
              <span>课程数: 12个</span>
              <span>实收金额: 24600元</span>
            </p>
            <el-table :data="tableData2" height="400" border style="width: 100%">
              <el-table-column prop="thingname" label="商品名称" width="120"></el-table-column>
              <el-table-column prop="thingclassify" label="商品分类"></el-table-column>
              <el-table-column prop="school" label="校区"></el-table-column>
              <el-table-column prop="shopnum" label="本月销售量"></el-table-column>
              <el-table-column prop="shopshishou" label="本月销售实收"></el-table-column>
              <el-table-column prop="operation" label="操作">
                <template slot-scope="scope2">
                  <el-button type="text" @click="dialogTableVisible = true" style="color:red">详情</el-button>
                  <el-dialog title="商品详情" :visible.sync="dialogTableVisible">
                    <el-table :data="gridData">
                      <el-table-column property="date" label="日期" width="150"></el-table-column>
                      <el-table-column property="where" label="姓名" width="150"></el-table-column>
                      <el-table-column property="address" label="校区" width="150"></el-table-column>
                      <el-table-column property="remark" label="备注"></el-table-column>
                    </el-table>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="其他收入" name="third">
            <div class="needflex">
              <section>
                选择分类：
                <el-select v-model="value1" placeholder="全部" class="coursetype">
                  <el-option
                    v-for="item in options5"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </section>
              <section>
                <div class="block">
                  选择日期：
                  <!-- <span class="demonstration"></span> -->
                  <el-date-picker
                    v-model="value2"
                    type="monthrange"
                    align="right"
                    unlink-panels
                    range-separator="-"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </div>
              </section>
              <section>
                搜索：
                <el-input v-model="input" placeholder="请输入内容" class="search"></el-input>
              </section>
            </div>
            <p class="zongnum">
              <span>课程数: 8个</span>
              <span>实收金额: 1200元</span>
            </p>
            <el-table :data="tableData3" height="400" border style="width: 100%">
              <el-table-column prop="number" label="序列" width="80"></el-table-column>
              <el-table-column prop="goodsname" label="收入名称"></el-table-column>
              <el-table-column prop="goodscount" label="收入金额"></el-table-column>
              <el-table-column prop="goodsclassify" label="收入分类"></el-table-column>
              <el-table-column prop="school" label="校区"></el-table-column>
              <el-table-column prop="time" label="录用时间" width="180"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
              <el-table-column prop="operation" label="操作">
                <!-- 插槽slot，用模块替代请求的数据 -->
                <template slot-scope="scope">
                  <el-button
                    @click="deleteRow(scope.$index, scope.row)"
                    type="text"
                    size="small"
                    style="color:red;font-size:14px;"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
  </el-container>
</template>


<script>
export default {
  name: "finance-item5",
  data() {
    return {
      table: false,
      dialog: false,
      loading: false,
      gridData: [
        {
          date: "2020-08-16",
          where: "支付宝支付",
          address: "宝安校区",
          remark: "全款，一次性付清",
        },
        {
          date: "2020-08-18",
          where: "微信支付",
          address: "南山校区",
          remark: "未付清，还有尾款800元",
        },
        {
          date: "2020-08-21",
          where: "支付宝支付",
          address: "福田校区",
          remark: "全款，一次性付清",
        },
        {
          date: "2020-08-25",
          where: "微信支付",
          address: "罗湖校区",
          remark: "未付清，还有尾款800元",
        },
        {
          date: "2020-08-16",
          where: "微信支付",
          address: "宝安校区",
          remark: "未付清，还有尾款800元",
        },
        {
          date: "2020-08-18",
          where: "支付宝支付",
          address: "南山校区",
          remark: "全款，一次性付清",
        },
        {
          date: "2020-08-21",
          where: "支付宝支付",
          address: "福田校区",
          remark: "全款，一次性付清",
        },
        {
          date: "2020-08-25",
          where: "支付宝支付",
          address: "罗湖校区",
          remark: "全款，一次性付清",
        },
      ],
      dialogTableVisible: false,
      gridData2: [
        {
          date: "2020-08-16",
          where: "支付宝支付",
          address: "宝安校区",
          remark: "备注",
        },
        {
          date: "2020-08-18",
          where: "微信支付",
          address: "南山校区",
          remark: "备注",
        },
        {
          date: "2020-08-21",
          where: "支付宝支付",
          address: "福田校区",
          remark: "备注",
        },
        {
          date: "2020-08-25",
          where: "微信支付",
          address: "罗湖校区",
          remark: "备注",
        },
        {
          date: "2020-08-16",
          where: "微信支付",
          address: "宝安校区",
          remark: "备注",
        },
        {
          date: "2020-08-18",
          where: "支付宝支付",
          address: "南山校区",
          remark: "备注",
        },
        {
          date: "2020-08-21",
          where: "支付宝支付",
          address: "福田校区",
          remark: "备注",
        },
        {
          date: "2020-08-25",
          where: "支付宝支付",
          address: "罗湖校区",
          remark: "备注",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      // 课程类型
      options2: [
        {
          value: "选项1",
          label: "街舞",
        },
        {
          value: "选项2",
          label: "爵士舞",
        },
        {
          value: "选项3",
          label: "古典舞",
        },
        {
          value: "选项4",
          label: "中国舞",
        },
        {
          value: "选项5",
          label: "拉丁舞",
        },
      ],
      // 课程名称
      options3: [
        {
          value: "选项1",
          label: "街舞秀",
        },
        {
          value: "选项2",
          label: "爵士舞tita",
        },
        {
          value: "选项3",
          label: "高雅古典舞",
        },
        {
          value: "选项4",
          label: "中国民族舞",
        },
        {
          value: "选项5",
          label: "激情拉丁",
        },
      ],
      // 选择分类
      options4: [
        {
          value: "选项1",
          label: "教辅商品",
        },
        {
          value: "选项2",
          label: "舞鞋",
        },
        {
          value: "选项3",
          label: "演出服",
        },
        {
          value: "选项4",
          label: "街舞",
        },
        {
          value: "选项5",
          label: "书法",
        },
      ],
      // 服装
      options6: [
        {
          value: "选项1",
          label: "钢琴乐谱",
        },
        {
          value: "选项2",
          label: "芭蕾舞鞋",
        },
        {
          value: "选项3",
          label: "拉丁服",
        },
        {
          value: "选项4",
          label: "炫酷服装",
        },
        {
          value: "选项5",
          label: "笔墨纸砚",
        },
      ],
      // 选择商品
      options5: [
        {
          value: "选项1",
          label: "资料废品",
        },
        {
          value: "选项2",
          label: "水瓶",
        },
        {
          value: "选项3",
          label: "旧衣物",
        },
      ],
      // 日期选择
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      // 表格数据
      tableData1: [],
      tableData2: [],
      tableData3: [],
      value: "",
      value1: "",
      value2: "",
      input: "",
      activeName: "second",
    };
  },
  mounted() {
    this.drawBing();
    this.jianbian();
    // 表格数据请求
    this.$axios
      .get("/app/mock/264777/example/1598250282726")
      .then((res) => {
        this.tableData1 = res;
      })
      .catch((err) => console.log(err));
    this.$axios
      .get("/app/mock/264777/example/1598250282728")
      .then((res) => {
        this.tableData2 = res;
      })
      .catch((err) => console.log(err));
    this.$axios
      .get("/app/mock/264777/example/1598250282729")
      .then((res) => {
        this.tableData3 = res;
      })
      .catch((err) => console.log(err));
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    drawBing() {
      // 初始化实例，获取元素
      let shanOne = this.$echarts.init(document.getElementById("shanOne"));
      // 绘制图表
      shanOne.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: [],
        },
        color: ["#6DD48B", "#3AA0FF", "#36CBCB", "#975FE3"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "课程收入" },
              { value: 310, name: "组合包收入" },
              { value: 234, name: "商品收入" },
              { value: 250, name: "其他" },
            ],
          },
        ],
      });
    },
    // 渐变色
    jianbian() {
      let jianbianlan = this.$echarts.init(
        document.getElementById("jianbianlan")
      );
      jianbianlan.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: [],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            max: 3000,
            interval: 500,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        color: ["#3BA1FF"],
        series: [
          {
            name: "日金额",
            type: "bar",
            data: [
              600,
              2000,
              800,
              1400,
              2600,
              1600,
              1800,
              2200,
              900,
              1700,
              2800,
            ],
          },
        ],
      });
    },
    // 删除
    deleteRow(index, row) {
      alert("您确定要删除嘛？");
      this.tableData3.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.el-table th {
  background-color: #fafafa;
  color: #5a5a5a !important;
}
.el-tab-pane section[data-v-327ec46f] {
  width: 400px !important;
}
.el-table_1_column_7,
.el-table_2_column_13,
.el-table_3_column_21 {
  color: red;
}
.block {
  display: flex;
  width: 400px !important;
  line-height: 40px;
}
.el-main {
  position: relative;
  box-sizing: border-box;
}
.el-header {
  display: flex;
  justify-content: space-between;
  line-height: 65px !important;
  color: #5a5a5a;
}
.el-header img {
  width: 26px;
  height: 26px;
  margin-left: 8px;
}
.el-header span {
  font-size: 14px;
  margin-left: 10px;
  margin-top: -10px !important;
}
.el-header i {
  margin-right: 20px;
}
.xiaoqu {
  position: absolute;
  right: 60px;
}
.bingul {
  list-style: none;
  width: 20%;
  position: absolute;
  left: 300px;
  top: 160px;
}
.bingul li {
  margin-top: 20px;
}
.echarts {
  width: 99%;
  height: 320px;
  background-color: #fff;
  margin-top: 60px;
  padding: 20px 30px;
  color: #5a5a5a;
  /* display: flex; */
}
.zhanbi {
  font-weight: 600;
  display: inline;
}
.echarts ul span {
  color: #ccc;
  /* height: 20px !important; */
}
.zongnum {
  margin-top: 10px;
  margin-bottom: 10px;
}
.zongnum span {
  margin-right: 30px;
}
.coursemoney {
  width: 99%;
  background-color: #fff;
  margin-top: 20px;
  padding: 10px;
  height: 600px;
  position: relative;
}
.needflex {
  display: flex;
}
.el-tab-pane section {
  width: 350px;
}
.search {
  width: 240px;
}
.coursetype {
  width: 200px;
}
.echarts section {
  width: 500px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 120px;
  top: 110px;
}
#jianbianlan {
  position: absolute;
  right: 120px;
  top: 140px;
}
</style>